<template>
  <div>
    <van-nav-bar title="今日头条-登录"></van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        required
        name="mobile"
        label="手机号"
        placeholder="请输入11位手机号"
        :rules="[{ required: true, message: '请填写正确的手机号',pattern:/^1[3-9]\d{9}$/}]"
      />
      <!-- rules属性配置检验规则
      :属性名="表达式"
      属性名="字符串"
      -->
      <van-field
        v-model="user.code"
        required
        type="password"
        name="code"
        label="密码"
        placeholder="请输入6位密码"
        :rules="[{ required: true, message: '请填写密码',pattern:/^\d{6}$/}]"
      />
      <div style="margin: 16px;">
        <van-button round block :loading="isLoading" :disabled="isLoading" loading-text="登录中..."  type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/api/index'
import Notify from '@/ui/Notify'
import { setToken } from '@/utils/token'

export default {
  data () {
    return {
      user: {
        mobile: '13888888888', // 手机号
        code: '246810' // 密码（246810）
      },
      isLoading: false
    }
  },
  methods: {
    // 提交方法（from整体通过验证才会触发）
    async onSubmit (values) {
      // 可以直接用values（收集参数名和值）
      console.log('submit', values)
      //   状态设置为true
      this.isLoading = true
      try {
        const res = await loginAPI(this.user)
        console.log(res)
        Notify({ type: 'success', message: '恭喜您，登录成功!' })
        setToken(res.data.data.token)
        // localStorage.setItem('refresh_token', res.data.data.refresh_token)
        // 跳转一定要写在最后->尽量最后执行
        // location.href -〉当前浏览器地址和要跳转的地址一样(不包含#后面锚点信息）-〉不会刷新网页
        // 地址改变，就会导致网页刷新
        // this.$router.push()压栈(会产生历史记录，可以回退)， this.$router.replace()替换(不会产生历史记录)....
        this.$router.replace('/layout/home')
      } catch (error) {
        // Promise内ajax抛出错误，直接进入这里
        Notify({ type: 'danger', message: '账号或者密码错误' })
      }
      this.isLoading = false// 网络请求完成，无论成功失败，把button的loading状态关闭
    }
  }
}
</script>

<style scoped lang="less">
// .van-nav-bar{
//     background-color: #007bff;
// }
// /deep/ .van-nav-bar__title{
//     color: #fff;
// }
</style>
